<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对React的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <Add />
      <Comment :comments="comments" />
    </div>
  </div>
</template>

<script>
import Add from './components/Add'
import Comment from './components/Comment.vue'
import {nanoid} from 'nanoid'

export default {
  name: 'App',
  components: {
    Add,
    Comment,
  },
  // 生命周期钩子函数
  mounted(){
    this.$globalEventBus.$on('addComment',this.addComment),
    this.$globalEventBus.$on('deleteComment',this.deleteComment)
  },
  methods: {
    // 添加一条评论
    addComment(comment){
      this.comments.push(comment);
    },
    // 删除一条评论
    deleteComment(id){
      this.comments = this.comments.filter(comment => comment.id !== id)
    }
  },
  data(){
    return{
      comments:[
        {id:nanoid(), userName:'杨逍',content:'我杨逍做不到的事、拿不到的东西，天下只怕不多。',avatar:'https://img0.baidu.com/it/u=2271557415,1905324501&fm=26&fmt=auto&gp=0.jpg'},
        {id:nanoid(), userName:'韦一笑',content:'姓韦的说得出，做得到，青翼蝠王言出必践，生平没说过一句空话。',avatar:'https://img0.baidu.com/it/u=976594656,3917480332&fm=26&fmt=auto&gp=0.jpg'},
        {id:nanoid(), userName:'张无忌',content:'咱们只须问心无愧，旁人言语，理他作甚？',avatar:'https://img2.baidu.com/it/u=53879350,254367682&fm=26&fmt=auto&gp=0.jpg'},
        {id:nanoid(), userName:'周芷若',content:'咱们从前曾有婚姻之约，我丈夫此刻却是命在垂危，加之今日我没伤你性命，旁人定然说我对你旧情犹存。若再邀你相助，天下英雄人人要骂我不知廉耻、水性杨花。',avatar:'https://img0.baidu.com/it/u=611962135,3341625269&fm=26&fmt=auto&gp=0.jpg'},
        {id:nanoid(), userName:'赵敏',content:'你心中舍不得我,我甚么都够了。管他甚么元人汉人,我才不在乎呢...',avatar:'https://img2.baidu.com/it/u=3483858038,4051242046&fm=15&fmt=auto&gp=0.jpg'},
        {id:nanoid(), userName:'宋青书',content:'周芷若，我喜欢你，嫁给我好吗？',avatar:'https://img1.baidu.com/it/u=1098872966,1366075346&fm=26&fmt=auto&gp=0.jpg'},
        {id:nanoid(), userName:'灭绝师太',content:'如若对张无忌心存爱心或和他结成夫妻，我的父母将在九泉之下不得安宁，我师父也会变成厉鬼日夜与我纠缠，我和张无忌生下的子女，男的代代为奴，女的世世为娼。',avatar:'https://img2.baidu.com/it/u=3353816802,1885159626&fm=26&fmt=auto&gp=0.jpg'},
      ]
    }
  }
}
</script>

<style>

</style>
